<template>
  <el-table :data="tableData" border :key="insert" style="width: 100%">
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="password" label="password" />
    <el-table-column prop="QQ" label="QQ" />
    <el-table-column prop="deviceID" label="deviceID" />
  </el-table>
  <div class="button-flush">
    <el-button type="primary" class="flushButton" @click="insert">获取最新一条数据</el-button>

  </div>
</template>

<script lang="ts" setup>
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
import {ref} from "vue";
import axios from "axios";
import qs from "qs";
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'

const open = () => {
  ElMessageBox.alert('这已经是最新的数据了', '打卡小助手提醒您', {
    callback: () => {

    },
  })
}
interface Product {
  id: string
  name: string
  password:string
  QQ:string
  deviceID:string
}

interface SummaryMethodProps<T = Product> {
  columns: TableColumnCtx<T>[]
  data: T[]
}
const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param
  const sums: string[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = 'Total Cost'
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = `$ ${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}`
    } else {
      sums[index] = 'N/A'
    }
  })

  return sums
}

let tableData= ref([

])

insert()
let info={
  id:'',
  name:'',
  password:'',
  QQ:'',
  deviceID:'',
}
function insert(){
  const datas={
    method:'POST',
    url:'/api/user/form',
    data:qs.stringify({
      name:localStorage.getItem("Name"),
      id:0
    })
  }
  axios(datas).then(function (res){
    if(info.password===res.data.password&&
    info.id===res.data.id&&
    info.name===res.data.name&&
    info.QQ===res.data.qq&&
    info.deviceID===res.data.deviceID){
      open()
    }else{
      info.id=res.data.id
      info.name=res.data.name
      info.password=res.data.password
      info.QQ=res.data.qq
      info.deviceID=res.data.deviceID
      tableData.value.push({
        id:info.id,
        name:info.name,
        password:info.password,
        QQ:info.QQ,
        deviceID:info.deviceID
      })
    }

  })
}
</script>
<style scoped>
.button-flush{
  width: 40%;
  margin:40px auto;
}
.flushButton {
  width: 100%;
  margin:auto;
}
</style>